第 2 步 - 为Home 屏幕创建键盘导航

在这一步中，创建键盘导航，在Home 应用程序屏幕上显示最近去过的目的地和收藏的目的地的应用程序屏幕之间切换。您还将设置焦点到打开显示空调温度调整滑块的应用程序屏幕的按钮上。

设置焦点到 Home 应用程序屏幕中的元素

在本节中，您将创建键盘导航，将焦点设置到导航至 AirCondition 应用程序屏幕的按钮，并在用户按下键盘上的 ↑ 键时导航至 Recent 和 Favorite（上箭头）应用程序屏幕。

要设置焦点到 Home 应用程序屏幕中的元素：

在工程 (Project) > RootPage > NavigationButtons 中选择 HomeButton 节点，在属性 (Properties) 中添加向上导航节点 (Up Navigation Node) 属性，将其设为 #ACButton。
您设置当 HomeButton 有焦点并且用户按下键盘上的 ↑（上箭头）键时，应用程序将焦点移动到 ACButton 节点。当 ACButton 节点有焦点，用户可以使用键盘上的 Enter 键导航至 AirCondition 屏幕。
在工程 (Project) > RootPage > Home > HomeControls 中选择 ACButton 节点，在节点组件 (Node Components) > 触发器 (Triggers) 部分向按钮: 点击 (Button:Click) 触发器添加设置焦点 (Set Focus) 动作，并将目标项 (Target Item) 设置为 #DriverButton。
当用户按下 ACButton 导航至 AirCondition 屏幕时，您将焦点设置到 DriverButton 节点。
在工程 (Project) > RootPage > Home > HomeControls 中选择 RecentFavoriteNavigation 节点，在属性 (Properties) 中右键点击，选择添加属性 (Add Property) > Focus Manager (焦点管理器) > 焦点范围 (Focus Scope) 属性并启用该属性。
您使用焦点范围 (Focus Scope) 属性让焦点从 RecentFavoriteNavigation 节点前进到 RecentButton 节点，以在 Recent 和 Favorite 应用程序屏幕之间导航。这样用户可以使用键盘键在这些切换按钮之间导航。
在工程 (Project) > RootPage > Home > HomeControls > RecentFavoriteNavigation 中选择 RecentButton 节点，在属性 (Properties) 中右键点击，选择添加属性 (Add Property) > 节点 (Node) > 逻辑焦点 (Logical Focus) 属性并启用该属性。
您设置 RecentButton 节点在将焦点设置到 2D 切换按钮组 (Toggle Button Group 2D) 节点 RecentFavoriteNavigation 时接收焦点。
在工程 (Project) > RootPage > Home > HomeControls 中选择 ACButton 节点，在属性 (Properties) 中添加向上导航节点 (Up Navigation Node) 属性，将其设为 #RecentFavoriteNavigation。
当用户按下键盘上的 ↑（上箭头）键时，设置焦点移动到 RecentFavoriteNavigation 节点。如果页面 (Page) 节点 Recent 活动，RecentFavoriteNavigation 让焦点前进到 RecentButton 节点，如果页面 (Page) 节点 Favorite 活动，则前进到 FavoriteButton。
在工程 (Project) 中选择Home > HomeControls > RecentFavoriteNavigation > RecentButton 节点，在节点组件 (Node Components) > 触发器 (Triggers) 部分添加属性变更时 (On Property Change) 触发器。
当RecentButton 节点已聚焦 (Focused) 属性值改变时，使用属性变更时 (On Property Change) 触发器触发该触发器中的动作。
在属性变更时 (On Property Change) 触发器的节点组件 (Node Components) 中，点击触发器设置 (Trigger Settings) 以打开触发器设置编辑器 (Trigger Settings Editor)，并将属性类型 (Property Type) 设置为Node.Focused。
设置属性变更时 (On Property Change) 触发器以跟踪 RecentButton节点已聚焦 (Focused) 属性值何时改变。
向属性变更时 (On Property Change) 触发器添加执行脚本 (Execute Script) 动作，并使用ButtonState.js 脚本。
当 RecentButton 切换按钮接收焦点，属性变更时 (On Property Change) 触发器触发打开切换按钮的执行脚本 (Execute Script) 动作。
在切换按钮: 打开 (Toggle Button: Toggled On) 触发器的节点组件 (Node Components) 中添加转到状态 (Go to State) 动作，并在该动作中设置：
- 项 (Item) 为屏幕 (Screens)/屏幕 (Screen)/RootPage/Home/Recent
- 状态 (State)为Recent State Manager/StateGroup/Focused
当该页面活动时，页面 (Page) 节点Recent 使用设置该节点外观的状态机。在RecentButton 接收焦点时，设置Recent 节点以更改其外观。
在属性变更时 (On Property Change) 触发器中点击新加属性改变时的触发器 (Add new trigger for On Property Change) 添加另一个属性变更时 (On Property Change) 触发器并在触发器设置 (Trigger Settings) 中将属性类型 (Property Type) 设置为Node.Focused。
当RecentButton 没有焦点时，使用此属性变更时 (On Property Change) 触发器更改页面 (Page) 节点Recent 的外观。
在触发器设置编辑器 (Trigger Settings Editor) 中点击添加条件 (Add condition) 添加条件到属性变更时 (On Property Change) 触发器并在触发器条件编辑器 (Trigger Condition Editor) 中设置：
- 值 A (Value A)
  - 起始值 (Value From) 为属性 (Property)
  - 项 (Item) 为 <Relative> 和 #RecentButton
  - 属性 (Property) 为已聚焦 (Focused)
- 运算符 (Operator) 为=
- 值 B (Value B)
  - 起始值 (Value From) 为固定 (Fixed)
  - 固定值 (Fixed Value) 为禁用
  在触发器条件编辑器 (Trigger Condition Editor) 中和触发器设置编辑器 (Trigger Settings Editor) 中点击保存 (Save)。
在您创建的属性变更时 (On Property Change) 触发器的节点组件 (Node Components) 中添加转到状态 (Go to State) 动作，并在该动作中设置：
- 项 (Item) 为屏幕 (Screens)/屏幕 (Screen)/RootPage/Home/Recent
- 状态 (State)为Recent State Manager/StateGroup/NotFocused
设置 Recent 节点以在 RecentButton 没有焦点时更改其外观。

在预览 (Preview) 中，当 Home 应用程序屏幕活动时您按下键盘上的 ↑（上箭头）键，您：

将焦点设置到用于导航至 AirCondition 应用程序屏幕的按钮。
ACButton 节点使用状态机，它在有焦点时将突出显示该按钮。
根据屏幕活动的情况设置焦点并导航至Recent 或 Favorite 屏幕。
Recent 和 Favorite 节点使用状态机，它们在有焦点时将突出显示页面。

在预览 (Preview) 中，当 ACButton 获得焦点，按下键盘上的 Enter 键，导航至 AirCondition 应用程序屏幕。

设置键盘键以将焦点设置到导航栏

在本节中，您将添加功能，将焦点从Home 应用程序屏幕的内容移动至导航栏。

要设置键盘键，将焦点设置到导航栏：

在工程 (Project) > RootPage > Home > HomeControls 中选择 ACButton 节点，在属性 (Properties) 中添加向下导航节点 (Down Navigation Node) 属性，将其设为 #HomeButton。
当用户按下键盘上的 ↓（下箭头）键时，应用程序设置焦点从 ACButton 节点移动到导航栏上的 HomeButton 节点。
为 Home > HomeControls > RecentFavoriteNavigation > RecentButton 和 FavoriteButton 节点重复上一步，但将这些节点的向下导航节点 (Down Navigation Node) 属性设置成 #ACButton。

在预览 (Preview) 中，当在 Recent 或 Favorite 屏幕有焦点时您按下键盘上的 ↓（下箭头）键，您：

将焦点设置到用于导航至 AirCondition 应用程序屏幕的按钮。
将焦点设置到导航栏。您可以使用 →（右箭头）和 ←（左箭头）键盘键导航至导航栏上的其他应用程序屏幕。

创建 Recent 和 Favorite 应用程序屏幕之间的键盘导航

在本节中，您将设置在用户按下键盘上的键时应用程序在 Recent 和 Favorite 应用程序屏幕之间导航。

要创建 Recent 和 Favorite 应用程序屏幕之间的键盘导航：

在工程 (Project) 中选择 RecentButton 节点，在节点组件 (Node Components) 中右键点击属性变更时 (On Property Change) 触发器并选择复制 (Copy) 以复制该触发器。
使用 FavoriteButton 节点中的相同触发器。
在工程 (Project) 中选择 FavoriteButton 节点，并在节点组件 (Node Components) 中右键点击选择粘贴触发 (Paste Trigger)，粘贴属性变更时 (On Property Change) 触发器至该节点。
在工程 (Project) 中选择 FavoriteButton 节点，在第二个属性变更时 (On Property Change) 触发器上方的节点组件 (Node Components) 中点击触发器设置 (Trigger Settings)，在触发器设置编辑器 (Trigger Settings Editor) 中点击为 RecentButton 节点创建的条件，在触发器条件编辑器 (Trigger Condition Editor) 中将项 (Item) 设置为 #FavoriteButton。
在第二个属性变更时 (On Property Change) 触发器的节点组件 (Node Components) 中点击转到状态 (Go to State) 动作，并在该动作中设置：
- 项 (Item) 为屏幕 (Screens)/屏幕 (Screen)/RootPage/Home/Favorite
- 状态 (State)为Favorite State Manager/StateGroup/NotFocused
在切换按钮: 打开 (Toggle Button: Toggled On) 触发器的节点组件 (Node Components) 中添加转到状态 (Go to State) 动作，并在该动作中设置：
- 项 (Item) 为屏幕 (Screens)/屏幕 (Screen)/RootPage/Home/Favorite
- 状态 (State)为Favorite State Manager/StateGroup/Focused
在FavoriteButton 接收焦点时，设置Favorite 节点以更改其外观。
在工程 (Project) 中选择 RecentButton 节点，在属性 (Properties) 中添加向右导航节点 (Right Navigation Node) 属性，将其设为 #FavoriteButton。
您设置应用程序当用户按下键盘上的 →（右箭头）键时焦点从 RecentButton 节点移动到 FavoriteButton 节点。
在工程 (Project) 中选择 FavoriteButton 节点，在属性 (Properties) 中添加向左导航节点 (Left Navigation Node) 属性，将其设为 #RecentButton。
您设置应用程序当用户按下键盘上的 ←（左箭头）键时焦点从 FavoriteButton 节点移动到 RecentButton 节点。

在预览 (Preview) 中，当 Recent 或 Favorite 应用程序屏幕有焦点时，使用 →（右箭头）或 ←（左箭头）键盘键在这些屏幕之间导航。

设置按键关闭空调设置

在本节中，您将学习设置 AirCondition 屏幕在用户按下 E 键盘键时关闭。

要设置按键关闭空调设置：

在工程 (Project) > RootPage > Home > AirCondition > AirConditionControls > 2D 切换按钮组 (Toggle Button Group 2D) 中选择 DriverButton 节点，在触发器 (Triggers) 部分的节点组件 (Node Components) 中添加键按下 (Key Down) 触发器。
使用键按下 (Key Down) 触发器触发动作，当用户按下键盘上的特定键时将焦点设置到节点。
在触发器设置 (Trigger Settings) 中，为您在上一步骤中创建的触发器，点击添加条件 (Add condition) 并在触发器条件编辑器 (Trigger Condition Editor) 中设置：
- 值 A (Value A)
  - 起始值 (Value From) 为消息 (Message)
  - 参数 (Argument) 为键 (Key)
    键按下 (Key Down) 触发器会拦截用户按下键盘上的键时产生的消息。消息包含键代码，Kanzi 使用键代码来触发触发器。
- 运算符 (Operator) 为=
- 值 B (Value B)
  - 起始值 (Value From) 为固定 (Fixed)
  - 固定值 (Fixed Value) 为19
  在触发器条件编辑器 (Trigger Condition Editor) 和触发器设置编辑器 (Trigger Settings Editor) 窗口中点击保存 (Save)。
  设置应用程序在用户按下 E 键时关闭AirCondition窗口。

向键按下 (Key Down) 触发器添加动作，用于关闭 AirCondition 应用程序屏幕：

导航至页面 (Navigate to Page) 动作，并将项 (Item) 设为 #Recent。
您可以设置应用程序以导航到Home 节点中的Recent 节点。

执行脚本 (Execute Script) 动作，在执行脚本 (Execute Script) 窗口中选择+ 创建脚本 (+ Create Script)，将其命名为 CheckFocus，在脚本编辑器 (Script Editor) 中使用此脚本：

//获取 主页面 (Page Host) 节点 Home。
// <MadCap:variable name="UI Strings.Page.State" /> 属性值可分辨
// <MadCap:variable name="UI Strings.Page" /> or <MadCap:variable name="UI Strings.Page Host" /> 节点是否活动：
// - 如果值为 0，节点不活动且不可见。
// - 如果值为 1，节点活动且可见。
var homePage = node.lookupNode('#Home');
var homeActive = homePage.getProperty('Page.State');
var homeButton = node.lookupNode('#HomeButton');

var airConditionPage = node.lookupNode('#AirCondition');
var airConditionActive = airConditionPage.getProperty('Page.State');


if (homeActive == 1)
{
    if (airConditionActive == 1)
    {
        airConditionPage.trySetFocus();
    }
    else
    {
        homeButton.trySetFocus();
    }
}

您可使用此脚本设置当用户关闭 AirCondition 应用程序屏幕时焦点放到导航栏。

在工程 (Project) 中选择 DriverButton 节点，在节点组件 (Node Components) 中右键点击键按下 (Key Down) 触发器并选择复制 (Copy)。
对 Passenger 节点和 2D 滑块 (Slider 2D) 节点使用相同的触发器，当用户按下 E 键时关闭 AirCondition 应用程序屏幕。
在工程 (Project) 中选择PassengerButton 节点，在节点组件 (Node Components) 中右键点击并选择粘贴触发 (Paste Trigger)。
为 Home > AirCondition > Driver > 2D 滑块 (Slider 2D) 和 Home > AirCondition > Passenger > 2D 滑块 (Slider 2D) 节点重复上一步，以粘贴键按下 (Key Down) 触发器到这些节点。
在工程 (Project) > Home > AirCondition > AirConditionControls 中选择关闭 (Close) 节点，在节点组件 (Node Components) 中向按钮: 点击 (Button:Click) 触发器添加设置焦点 (Set Focus) 动作，并将目标项 (Target Item) 设置为 #HomeButton。
当用户使用指针关闭 AirCondition 应用程序屏幕时，设置焦点回到 HomeButton 切换按钮。

在 AirCondition 应用程序屏幕的预览 (Preview) 中，按下键盘上的 E 键关闭该屏幕。

使用键盘键导航应用程序：

←（左箭头）和 →（右箭头）键
- 在 Home、Media、Car 和Navigation 应用程序屏幕之间导航。
- 当 Recent 或 Favorite 应用程序屏幕有焦点，在这些应用程序屏幕之间导航。
↑（上箭头）和 ↓（下箭头）键
- 将焦点设置到打开 AirCondition 应用程序屏幕的按钮。
- 根据应用程序屏幕活动的情况设置焦点至 Recent 或 Favorite 应用程序屏幕。
当 ACButton 节点有焦点时，Enter 键导航至 AirCondition 应用程序屏幕。
E 键关闭 AirCondition 应用程序屏幕。

< 上一步

下一步 >

要详细了解焦点在 Kanzi 中的工作原理，请参阅焦点。

要详细了解有关页面 (Page) 和主页面 (Page Host) 节点的信息，请参阅使用页面 (Page) 和主页面 (Page Host) 节点。

要详细了解有关使用触发器的信息，请参阅使用触发器。

要详细了解有关使用 JavaScript 脚本的信息，请参阅使用脚本。

打开导航